import 'package:todo_app/constants/Screen.dart';
import 'package:flutter/material.dart';


/// 纯色背景按钮 
/// 
/// active状态下 背景是主题色 文字是白色
/// 
/// disable状态下 背景是灰色 文字是灰色
class CustomElevateButton extends StatefulWidget {

  final Widget child;
  final bool disabled;
  final Color? bgColor;
  final Color? disabledBgColor;
  final TextStyle? style;
  final TextStyle? disabledStyle;
  final double width;
  final double height;
  final double? borderRadius;
  final VoidCallback? onTap;
  final EdgeInsets? margin;
  final List<BoxShadow>? boxShadow;

  CustomElevateButton({
    Key? key, this.margin, required this.child, this.disabled = false, this.bgColor, this.disabledBgColor, this.style, this.disabledStyle, required this.width, required this.height, this.borderRadius, this.onTap, this.boxShadow }) : super(key: key);

  @override
  _CustomElevateButtonState createState() => _CustomElevateButtonState();
}

class _CustomElevateButtonState extends State<CustomElevateButton> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final Color bgColor = widget.bgColor ?? theme.primaryColor;
    final Color disabledBgColor = widget.disabledBgColor ?? Color(0xFFE7E7E7);
    final TextStyle style = TextStyle(color: Colors.white, fontSize: Screen.sizeByDesign(14)).merge(widget.style );
    final TextStyle disabledStyle = style.merge(TextStyle(color: Color(0xFFBEBEBE))).merge(widget.disabledStyle);

    return Container(
      margin: widget.margin,
      child: GestureDetector(
        onTap: widget.disabled ? null : widget.onTap,
        child: Container(
          alignment: Alignment.center,
          width: widget.width,
          height: widget.height,
          decoration: BoxDecoration(
            color: !widget.disabled ? bgColor : disabledBgColor,
            borderRadius: BorderRadius.circular(widget.borderRadius ?? widget.height / 2.0),
            boxShadow: widget.boxShadow
          ),
          child: AnimatedDefaultTextStyle(
            style: !widget.disabled ? style : disabledStyle,
            duration: Duration(milliseconds: 150),
            child: widget.child,
          )
        )
      )
    );
  }
}
